<template>
	<view class="content">
		<button @click="open">打开弹窗</button>
		<!-- <uni-popup ref="popup" type="bottom">底部弹出 Popup</uni-popup> -->
		<uni-popup ref="popup" type="center"></uni-popup>
		<view class="list">
			<view class="theme">个人信息</view>
			<view class="list-call">
				<view class="title">姓名：</view>
				<input class="sl-input" v-model="operating_name" type="text" maxlength="11" placeholder="请输入您的姓名" />
			</view>
			<view class="list-call">
				<view class="title">手机号：</view>
				<input class="sl-input" v-model="mobile" type="number" maxlength="11" placeholder="请输入您的手机号" />
			</view>
			<view class="list-call" v-if="theme == 4">
				<view class="title">是否有签约机构：</view>
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="array">
						<view class="uni-input">{{ array[index] }}</view>
					</picker>
				</view>
				<image src="../../../static/YunCangImg/back.png" mode=""></image>
			</view>
			<view class="list-call">
				<view class="title">公司名称：</view>
				<input class="sl-input" v-model="company_name" type="text" maxlength="11" placeholder="请输入公司名称" />
			</view>
			<view class="list-call">
				<view class="title">短信验证码：</view>
				<input class="sl-input" v-model="code" type="number" maxlength="4" placeholder="验证码" />
				<view class="yzm" :class="{ yzms: second > 0 }" @tap="getcode">{{ yanzhengma }}</view>
			</view>
			<view class="list-call">
				<view class="title">设置密码：</view>
				<input class="sl-input" v-model="password" type="text" maxlength="8" placeholder="请输入6~8位密码" :password="!showPassword" />
				<image class="img" :src="showPassword ? '/static/shilu-login/op.png' : '/static/shilu-login/cl.png'" @tap="display"></image>
			</view>
			<view class="list-call">
				<view class="title">确认密码：</view>
				<input class="sl-input" v-model="password2" type="text" maxlength="8" placeholder="请再次输入密码" :password="!showPassword" />
				<image class="img" :src="showPassword ? '/static/shilu-login/op.png' : '/static/shilu-login/cl.png'" @tap="display"></image>
			</view>
		</view>
		<view class="attestation">
			<view class="theme">{{ themes }}</view>
			<view class="pageImg" v-if="theme == 3">
				<view class="title">请拍照并上传营业执照</view>
				<view class="page"><upload-img :width="300" :height="200" bgsrc="../../../static/YunCangImg/certificates.png" @chooseimg="handleChooseImg1"></upload-img></view>
			</view>
			<view class="pageImg" v-if="theme == 3">
				<view class="title">请拍照并上传牌照</view>
				<view class="page"><upload-img :width="300" :height="200" bgsrc="../../../static/YunCangImg/certificates.png" @chooseimg="handleChooseImg2"></upload-img></view>
			</view>
			<view class="pageImg ">
				<view class="title">请拍照及上传身份证（非必填项）</view>
				<view class="pageData">
					<view class="page">
						<upload-img :width="300" :height="200" bgsrc="../../../static/YunCangImg/certificates.png" @chooseimg="handleChooseImg3"></upload-img>
						<text>身份证人像面</text>
					</view>
					<view class="page">
						<upload-img :width="300" :height="200" bgsrc="../../../static/YunCangImg/certificates3.png" @chooseimg="handleChooseImg4"></upload-img>
						<text>身份证国徽面</text>
					</view>
				</view>
			</view>
			<view class="pageImg" v-if="theme == 1">
				<view class="title">请拍照并上传营业执照</view>
				<view class="page"><upload-img :width="300" :height="200" bgsrc="../../../static/YunCangImg/certificates.png" @chooseimg="handleChooseImg5"></upload-img></view>
			</view>
		</view>
		<view class="button-login" hover-class="button-hover" @tap="bindLogin"><text>注册</text></view>
	</view>
</template>

<script>
var _this, js;
import uploadImg from '../../../components/amazarashi-uploadimg/uploadImg.vue';
export default {
	components: {
		uploadImg,
	},
	data() {
		return {
			operating_name: '', //姓名
			mobile: '', //手机号
			company_name: '', //公司
			code: '', //验证码
			password: '', //密码
			password2: '', //重复密码
			zhizhao: '', //营业执照
			identity_card1: '', //法人身份证正反面
			identity_card2: '', //法人身份证正反面
			agreement: true,
			showPassword: false,
			second: 0,
			array: ['是', '否'],
			index: 0,
			theme: '',
			themes: ''
		};
	},
	onLoad(e) {
		this.theme = e.id;
		_this = this;
		if (e.id == 3) {
			this.themes = 'MCN身份认证';
		} else if (e.id == 4) {
			this.themes = '主播身份认证';
		} else {
			this.themes = '商家身份认证';
		}
	},
	onUnload() {
		clearInterval(js);
		this.second = 0;
	},
	computed: {
		yanzhengma() {
			if (this.second == 0) {
				return '获取验证码';
			} else {
				if (this.second < 10) {
					return '重新获取0' + this.second;
				} else {
					return '重新获取' + this.second;
				}
			}
		}
	},
	onUnload() {
		this.clear();
	},
	methods: {
		// 是否签约
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
		},
		// 上传图片
		handleChooseImg1(e) {
			console.log(66666);
		},
		handleChooseImg2(e) {
			console.log('imageSrc:', e);
		},
		handleChooseImg3(e) {
			this.identity_card1 = e.src;
		},
		handleChooseImg4(e) {
			this.identity_card2 = e.src;
		},
		handleChooseImg5(e) {
			this.zhizhao = e.src;
		},
		clear() {
			clearInterval(js);
			js = null;
			this.second = 0;
		},
		display() {
			this.showPassword = !this.showPassword;
		},
		agreementSuccess() {
			this.agreement = !this.agreement;
		},
		// 发送短信
		getcode() {
			if (this.phone.length != 11) {
				uni.showToast({
					icon: 'none',
					title: '手机号不正确'
				});
				return;
			}
			if (this.second > 0) {
				return;
			}
			this.second = 60;
			//请求业务
			js = setInterval(function() {
				_this.second--;
				if (_this.second == 0) {
					_this.clear();
				}
			}, 1000);
			// uni.request({
			//   url: 'http://***/getcode.html', //仅为示例，并非真实接口地址。
			//   data: {
			//     phone: this.phone,
			//     type: 'reg'
			//   },
			//   method: 'POST',
			//   dataType: 'json',
			//   success: (res) => {
			//     if (res.data.code != 200) {
			//       uni.showToast({
			//         title: res.data.msg,
			//         icon: 'none'
			//       });
			//     } else {
			//       uni.showToast({
			//         title: res.data.msg
			//       });
			//       js = setInterval(function() {
			//         _this.second--;
			//         if (_this.second == 0) {
			//           _this.clear()
			//         }
			//       }, 1000)
			//     }
			//   },
			//   fail() {
			//     this.second == 0
			//   }
			// });
		},
		open:function(){
		     this.$refs.popup.open()
		 },	
		// 判断请求
		bindLogin() {
			// if (this.agreement == false) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '请先阅读《软件用户协议》'
			// 	});
			// 	return;
			// }
			// if (this.name.length >6) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '昵称不能超过6位'
			// 	});
			// 	return;
			// }
			// if (this.phone.length != 11) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '手机号不正确'
			// 	});
			// 	return;
			// }
			// if (this.password.length < 6) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '密码不正确'
			// 	});
			// 	return;
			// }
			// if (this.password==this.pass) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '密码不一致'
			// 	});
			// 	return;
			// }
			// if (this.code.length != 4) {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		title: '验证码不正确'
			// 	});
			// 	return;
			// }
			uni.request({
				url: 'http://shop.lzyuncang.com/mobile/userApi/businessr',
				data: {
					operating_name: this.operating_name, //姓名
					mobile: this.operating_name, //手机号
					company_name: this.operating_name, //公司
					code: this.operating_name, //验证码
					password: this.operating_name, //密码
					password2: this.operating_name, //重复密码
					zhizhao: this.zhizhao, //营业执照
					identity_card1: this.identity_card1, //法人身份证正反面
					identity_card2: this.identity_card2 //法人身份证正反面
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded;application/json;charset=UTF-8'
				},
				method: 'POST',
				dataType: 'json',
				success: res => {
					console.log(res);
					if (res.data.statusCode != 200) {
						uni.showToast({
							title: '注册正在审核请稍等',
							icon: 'none'
						});
					} else {
						uni.showToast({
							title: '注册失败'
						});
						setTimeout(function() {
							uni.navigateBack();
						}, 1500);
					}
				}
			});
		}
	}
};
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: #f2f2f2;
}

.header {
	width: 161rpx;
	height: 161rpx;
	background: rgba(63, 205, 235, 1);
	box-shadow: 0rpx 12rpx 13rpx 0rpx rgba(63, 205, 235, 0.47);
	border-radius: 50%;
	margin-top: 30rpx;
	margin-left: auto;
	margin-right: auto;
}

.header image {
	width: 161rpx;
	height: 161rpx;
	border-radius: 50%;
}

.list {
	width: 88%;
	height: 619upx;
	background: #ffffff;
	border-radius: 20upx;
	display: flex;
	flex-direction: column;
	margin: 20rpx auto;
	padding: 0 20rpx;
}
.list .theme {
	font-size: 36rpx;
	color: #333333;
	margin-top: 20rpx;
}
.list-call {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 100rpx;
	color: #333333;
}
.list-call image {
	width: 36upx;
	height: 36upx;
}
.list-call .uni-list-cell-db {
	position: relative;
	left: -170rpx;
	font-size: 36rpx;
	color: #333333;
}
.list-call .title {
	font-size: 28upx;
	color: #666666;
	width: 224rpx;
}
.uni-input-placeholder {
	font-size: 28upx;
}
.list-call .img {
	width: 40rpx;
	height: 40rpx;
}

.list-call .sl-input {
	flex: 1;
	text-align: left;
	font-size: 32rpx;
	margin-left: 16rpx;
}

.yzm {
	color: #ffffff;
	font-size: 24rpx;
	padding: 16rpx 20rpx;
	width: auto;
	border-radius: 50rpx;
	background: #e50012;
}

.yzms {
	color: #999999 !important;
	border: 1rpx solid #999999;
}

.button-login {
	color: #ffffff;
	font-size: 34rpx;
	width: 470rpx;
	height: 100rpx;
	line-height: 100rpx;
	background: #e50012;
	box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(164, 217, 228, 0.2);
	border-radius: 50rpx;
	text-align: center;
	margin: 60rpx auto;
}

.button-hover {
	background: linear-gradient(-90deg, rgba(63, 205, 235, 0.8), rgba(188, 226, 158, 0.8));
}

.agreement {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	font-size: 30rpx;
	margin-top: 80rpx;
	color: #ffa800;
	text-align: center;
	height: 40rpx;
	line-height: 40rpx;
}

.attestation {
	width: 87%;
	background: #ffffff;
	margin: auto;
	padding: 20rpx 20rpx;
	border-radius: 20rpx;
}
.attestation .page {
	width: 300rpx;
	height: 200rpx;
	background: #f2f2f2;
	margin: 40upx auto;
	border: 1rpx solid;
}

.attestation .pageData .page {
	text-align: center;
	color: #666666;
	font-size: 22rpx;
	line-height: 60rpx;
}
.pageData uni-text {
	margin-top: 20rpx;
}
.attestation .title {
	font-size: 28rpx;
	color: #666666;
}

.attestation .pageData {
	display: flex;
}
.attestation .theme {
	font-size: 36rpx;
	color: #333333;
	margin-bottom: 20rpx;
}
</style>
